<template>
	<view class="recommend" >
		<view class="content">
			<view class="serchBox">
				<view class="serchButton" @click="goSearch">
					<image src="../../static/images/search_icon.png" mode="scaleToFill"></image> 搜索你想要的商品
				</view>
			</view>
			<view class="tabnav">
				 <scroll-view  scroll-x="true" class="scroll-X" >
					 <view class="tabnavBar" :class="{active:current == 0}">
					 	<view @tap="getrecommend(0)">
					 		精选推荐
					 	</view>
					 	<text :class="{active:current == 0}"></text>
					 </view>
					<view class="tabnavBar" 
					:class="{active:current == index +1}" 
					v-for="(item,index) in tabnavBarLsit" :key="index"  
					@tap="getrecommendData(index+1,item.id)">
						<view>
							{{item.name}}
						</view>
						<text :class="{active:current == index +1 }"></text>
					</view>
				</scroll-view>
			</view>
			<view v-if="current == 0">
			<view class="swiperBox">
				<swiper class="swiperBanner" indicator-active-color="#E8271B" :indicator-dots="true" :autoplay="true" :interval="3000"
				 :duration="1000"  >
					<swiper-item v-if="bannerList"  v-for="(item,index) in bannerList" :key = 'index'>
						<view class="swiper-item">
							<image :src="item.img" mode="scaleToFill"></image>
						</view>
					</swiper-item>
					<swiper-item v-else>
						<view class="swiper-item">
							<!-- <image src="../../static/images/image_1.png" mode="scaleToFill"></image> -->
						</view>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="recommendCardBox">
				<scroll-view  scroll-x="true" class="scroll-X" >
					 <view class="recommendCard" 
					 v-for="(item,index) in cardList" :key="index" 
					 @tap="goList(item.categoryId,item.iconName)">
					 	<image :src="item.iconImg" mode=""></image>
						<view class="mask">
							<view class="title">
								{{item.iconName}}
							</view>
							<view class="desction">
								{{item.title}}
							</view>
						</view>
					 </view>
					
				</scroll-view>
			</view>
			
			<view class="foryourSelect">
				<view class="title">
					<image src="../../static/images/circle_1.png" mode="scaleToFill"></image>
					<text>为你精选</text>
					<image src="../../static/images/circle_2.png" mode="scaleToFill"></image>
				</view>
				<view >
					
					<view class="uni-list selectLists">
						<view class="uni-list-cell selectList"
						 v-for="(item,index) in selectList" :key="index" @tap="goDetails(item)">
							<view class="imgbox">
								<image :src="item.pic.split(',')[0]" mode="scaleToFill"></image>
							</view>
							<view class="desction">
								{{item.name}}
							</view>
							<view class="priceBox">
								<view class="price">
									￥{{item.price}}
								</view>
								<view class="salesNum">
									总销量{{item.sale}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="loadStatusText">
					{{loadStatusText}}
				</view>
			</view>
		</view>
	</view>
	
	<view v-if="current != 0" class="foryourSelect">
		<view class="uni-list selectLists" v-if="dataList.length>0">
			<view class="uni-list-cell selectList" v-for="(item,index) in dataList" :key="index" @tap="goDetails(item)">
				<view class="imgbox">
					<image :src="item.pic.split(',')[0]" mode=""></image>
				</view>
				<view class="desction">
					{{item.name}}
				</view>
				<view class="priceBox">
					<view class="price">
						￥{{item.price}}
					</view>
					<view class="salesNum">
						总销量{{item.sale}}
					</view>
				</view>
			</view>
		</view>
		<view class="empty"  v-if="dataList.length == 0">
			<image src="../../static/images/tixian.png" mode="scaleToFill"></image>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectList:[],
				pageNum:1,
				loadStatusText: '加载中...',
				adUrl:"",
				bannerList:[],
				tabnavBarLsit:[],
				current:0,
				cardList:[],
				dataList:[],
			}
		},
		onLoad() {
			this.getSelected();
			this.getBannerData();
			this.getTabNavBar();
			this.getrecommendCardData();
		},
		onReachBottom(){
			if(this.current == 0){
				this.getSelected()
			}else{
				this.getrecommendData()
			}
		},
		onPullDownRefresh(){
			this.pageNum = 1
			this.selectList = []
			Promise.all([this.getSelected()]).then(res=>{
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			//获取轮播图
			getBannerData(){
				let data = {
					"pageId": "1",
					fitType:'2'
				}
				this.$http.post(this.$http.baseUrl+'/api/v1.0/admin/banner/AllBanner',data,(res)=>{
					this.bannerList = res.data.data
				})
			},
			//获取导航
			getTabNavBar(){
				let data = {}
				this.$http.post(this.$http.baseUrl+'/api/v1.0/app/productCategory/NavCategory',data,(res)=>{
					this.tabnavBarLsit = res.data.data;
				})
			},
			//当按钮点击精选推荐
			getrecommend(){
				this.current = 0;
				this.getBannerData()
				this.getSelected()
			},
			// 搜索栏
			goSearch(){
				uni.navigateTo({
					url: '../search/search',
				});
			},
			//点击导航其他数据
			getrecommendData(num,id){
				this.current = num;
				this.pageNum = 1;
				let data = {
					categoryId:id,
					pageNum:this.pageNum,
					pageSize:10,
				}
				
				this.$http.post(this.$http.baseUrl +'/api/v1.0/app/product/getProductsByCategoryId',data,res=>{
					this.pageNum++
					this.dataList = res.data.data;
				
				} )
			},
			//获取图片数据
			getrecommendCardData(){
				let data = {
					pageId:2
				}
			this.$http.post(this.$http.baseUrl +'/api/v1.0/admin/icon/AllIcon',data,res=>{
				this.cardList = res.data.data
			} )
			},
			goList(num,name){
				uni.navigateTo({
					url:"/pages/listComponents/listComponents?titleId=" + num + '&name=' + name
				})
			},
			getSelected(){
				let data = {
					  "pageNum": this.pageNum,
					  "pageSize": 10,
					  "recommandStatus": 1,
				}
				var _this = this
				this.$http.post(this.$http.baseUrl + '/api/v1.0/app/product/ProductTopSell',data,res=>{
					this.pageNum++
					if(res.data.data.length == 0){
						_this.loadStatusText = "已加载全部"
						return false;
					}else{
						_this.loadStatusText = "加载成功"
						if(_this.selectList.length == 0){
							_this.selectList = res.data.data;
						}else{
							_this.selectList = _this.selectList.concat(res.data.data);
							_this.loadStatusText = "加载成功"
						}
					}
					
				})
			},
			goDetails(e){
				uni.navigateTo({
					url:'/pages/details/details?id=' + e.id
				})
			},
			goAd(){
				uni.navigateTo({
					url:"/"+this.adUrl
				})
			},
			goList(num,name){
				uni.navigateTo({
					url:"/pages/listComponents/listComponents?titleId=" + num + '&name=' + name
				})
			},
				
			
		
		}
	}
</script>

<style lang="scss">
	.recommend {
		background-repeat: no-repeat;
		background-size: 100%;
		background-color: #f2f2f2f2;
		min-height: 100vh;
		.serchBox {
			padding-top: 24upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			.msgIcon {
				width: 48upx;
				height: 48upx;
				line-height: 64upx;
			}
			.point {
				width: 20upx;
				height: 20upx;
				border-radius: 50%;
				background-color: #FFD200;
				position: absolute;
				right: 0;
				top: 35upx;
			}
		}
		
		.serchButton {
			width: 694upx;
			background-color: #fff;
			border-radius: 32upx;
			height: 64upx;
			line-height: 64upx;
			font-size: 28upx;
			color: #BFBFBF;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			image {
					width: 40upx;
					height: 40upx;
					margin-left: 38upx;
				}
		}
		.tabnav{
			width: 100%;
			margin-top: 38upx;
			.scroll-X{
				width: 100%;
				 white-space: nowrap;
				.tabnavBar{
				text-align: center;
				display: inline-block;
				margin-right: 50upx;
				line-height: 26upx;
				font-size: 28upx;
				height: 40upx;
				color: #4d4d4d;
				&.active{
					color: #F63810;
				}
				text{
					width: 35upx;
					height: 5upx;
					border-radius: 2.5upx;
					display: inline-block;
					&.active{
						background-color:#E8271B ;
					}
				}
			}
			}
			
		}
		.swiperBox {
			margin-top: 40upx;
			border-radius: 20upx;
			overflow: hidden;
		}
		.swiperBanner {
			height: 280upx;
		}
		.swiper-item {
			height: 100%;
			width: 100%;
			
			image {
				height: 100%;
				width: 100%;
			}
		}
		.recommendCardBox{
			width: 100%;
			overflow: hidden;
			margin-top: 20upx;
			.scroll-X{
				width: 100%;
				white-space: nowrap;
				.recommendCard{
					display: inline-block;
					width: 280upx;
					height: 185upx;
					overflow: hidden;
					border-radius: 25upx;
					margin-right: 20upx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
					}
					.mask{
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background-color: rgba($color: #000000, $alpha: 0.1);
						text-align: center;
						
						.title{
							color: #fff;
							font-size: 32upx;
							font-weight: bold;
							margin-top: 30upx;
							margin-bottom: 20upx;
						}
						.desction{
							color: #fff;
							font-size: 22upx;
							width: 200upx;
							margin: 0 auto;
							white-space: pre-line;
						}
					}
				}
			}
		}
		
		.foryourSelect{
			height: 100%;
			width: 694upx;
			margin: 50upx auto 0;
			// padding-bottom: 120upx;
			.title{
				display: flex;
				align-items: center;
				text-align: center;
				justify-content: center;
				image{
					width: 78upx;
					height: 6upx;
				}
				text{
					font-size: 28upx;
					color: #4d4d4d;
					font-weight: 500;
					margin: 0 10upx;
				}
			}
			.selectLists{
				margin-top: 50upx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.selectList{
					border-radius: 20upx;
					background-color: #fff;
					overflow: hidden;
					width: 334upx;
					height: 530upx;
					margin-right: 25.7upx;
					margin-bottom: 26upx;
					&:nth-child(2n){
						margin-right: 0;
					}
					image{
						width: 334.3upx;
						height: 333upx;					
					}
					.desction{
						width: 297upx;
						margin: 24upx auto;
						color: #333;
						font-weight: 500;
						font-size: 28upx;
						display: -webkit-box;
						overflow: hidden; 
						white-space: normal!important;
						text-overflow: ellipsis;
						word-wrap: break-word; 
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						
					}
					.priceBox{
						display: flex;
						justify-content: space-between;
						width: 297upx;
						margin: 0 auto;
						.price{
						color: #F63810;
						font-size: 24upx;
							text{
								font-size: 32upx;
								font-weight: bold;
							}
						}
						.salesNum{
							color: #4d4d4d;
							font-size: 24upx;
						}
					}
					
				}
			}
			.loadStatusText{
				font-size: 24upx;
				text-align: center;
				color: #999999;
				height: 100upx;
				line-height: 100upx;
			}
		}
	
		.empty{
			margin-top: 250upx;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 386upx;
				height: 330upx;
			}
		}
	}

	.content {
		width: 694upx;
		margin: 0 auto;
	}
 


</style>
